<template>
	<el-card class="menu_tree_item" shadow="never">
		<template slot="header">
			<h2>{{ menuTitle }}</h2>
			<el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddMenu">添加</el-button>
		</template>
		<template v-if="treeData.length > 0">
			<div v-for="(item, index) in treeData" :key="index" :class="['item', { active: item.id === checked }]" @click="handleCheckedMenu(item)">
				<template v-if="item.childList.length > 0">
					<i class="el-icon-caret-right"></i>
					<h3 style="margin-left: 6px">{{ item.name }}</h3>
				</template>
				<template v-else>
					<h3 style="margin-left: 20px">{{ item.name }}</h3>
				</template>
				<el-button-group>
					<el-button type="text" @click.stop="handleEditMenu(item)">编辑</el-button>
					<el-button type="text" @click.stop="handledeleteMenu(item)">删除</el-button>
				</el-button-group>
			</div>
		</template>
		<template v-else>
			<el-empty :image-size="100"></el-empty>
		</template>
	</el-card>
</template>

<script>
import { deleteMenu } from '@/api/system/tbSysMenu';
export default {
	props: {
		value: {
			type: String,
			default: ''
		},
		level: {
			type: Number,
			required: true
		},
		treeData: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			checked: this.value,
			currMenu: {}
		};
	},
	computed: {
		menuTitle() {
			if (this.level === 1) {
				return '一级菜单';
			} else if (this.level === 2) {
				return '二级菜单';
			} else if (this.level === 3) {
				return '三级菜单';
			} else if (this.level === 4) {
				return '功能按钮';
			}
		}
	},
	watch: {
		value(val) {
			this.checked = val;
		},
		checked(val) {
			this.$emit('input', val);
		}
	},
	methods: {
		handleCheckedMenu(data) {
			this.checked = data.id;
		},

		//添加菜单
		handleAddMenu() {
			this.$emit('hand', this.level);
		},

		//修改菜单
		handleEditMenu(data) {
			this.$emit('hand', this.level, data);
		},

		//删除菜单
		handledeleteMenu(data) {
			let that = this;
			if (data.childList && data.childList.length > 0) {
				this.$showCustomMessage('warning', `当前菜单存在子级，请先处理子级在删除该菜单`);
			} else {
				this.$confirm('确定要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					async beforeClose(action, instance, done) {
						if (action === 'confirm') {
							await that.deleteMenuRequest(data.id);
							done();
						} else {
							done();
						}
					}
				}).catch(() => {});
			}
		},

		//删除菜单请求
		async deleteMenuRequest(id) {
			let result = await deleteMenu(id).then((res) => res.data);
			if (result.code === '0') {
				this.$showCustomMessage('success', `删除菜单成功`);
				this.$emit('refresh');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.menu_tree_item {
	display: flex;
	flex-direction: column;
	max-height: 100%;
	&:deep(.el-card__header) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px;
		flex-shrink: 0;
		background-color: #f5f7fa;
		h2 {
			font-size: 14px;
			line-height: 24px;
		}
		.el-button {
			padding: 5px 9px;
		}
	}
	&:deep(.el-card__body) {
		padding: 0;
		flex: 1;
		overflow: auto;
		&::-webkit-scrollbar-track {
			background: rgba(0, 0, 0, 0.1);
			border-radius: 0;
		}

		&::-webkit-scrollbar {
			-webkit-appearance: none;
			width: 6px;
			height: 6px;
		}

		&::-webkit-scrollbar-thumb {
			cursor: pointer;
			border-radius: 3px;
			transition: color 0.2s ease;
			background-color: rgba(0, 0, 0, 0.2);
		}
		.item {
			display: flex;
			align-items: center;
			padding: 10px;
			height: 28px;
			border-bottom: solid 1px #e6ebf0;
			cursor: pointer;
			h3 {
				flex: 1;
				overflow: hidden;
				color: #2f3133;
				font-size: 14px;
				font-weight: normal;
			}
			.el-button {
				padding: 5px;
			}
			&:hover {
				background-color: #e9f0f7;
			}
			&.active {
				background-color: #e9f0f7;
			}
		}
	}
}
</style>
